<template>
  <div class="wrapper">
    <div class="bookWrap">
     <div class="boxWrap" ref="box">
       <div class="box" >
         <div class="circle" v-for="item in bookList" @click="bookClick(item)">
           <img :src="item.cover">
         </div>
       </div>
     </div>
    </div>
    <div class="bookMask" v-if="bookMask">
      <div class="bookInfo">
        <img class="cover" :src="bookItem.cover" alt="">
        <p class="title">{{bookItem.name}}</p>
        <div class="button">去阅读</div>
        <img class="close" src="../assets/images/close.png" alt="" @click="bookMask = false">
      </div>

    </div>
    <div id="viewer" style="height: 100%;"></div>
  </div>
</template>

<script>
  import {Viewer} from '@photo-sphere-viewer/core'
  import {MarkersPlugin} from '@photo-sphere-viewer/markers-plugin'
  import {EquirectangularTilesAdapter} from '@photo-sphere-viewer/equirectangular-tiles-adapter'
  import '@photo-sphere-viewer/core/index.css'
  import '@photo-sphere-viewer/markers-plugin/index.css'
  import '@photo-sphere-viewer/compass-plugin/index.css'
  import UUID from 'uuid-js'
  import md5 from 'js-md5'
  import {listScene,getScene,listMark,getAddr,booksList,getBook} from '../api/api'
  import PlanView from "../components/PlanView";
  import PlanBigView from "../components/PlanBigView";
  export default {
    name: "Home",
    components: {PlanView,PlanBigView},
    data() {
      return {
        //场景数据
        sceneData: {},
        //插件对象
        viewer: null,
        markersPlugin: null,
        bookList: [],
        bookMask: false,
        bookItem: null
      }
    },
    mounted() {
      this.initViewer()
      this.getBooksList()


    },
    methods: {
      //获取电子资源
       getBooksList() {
        if (this.booksRecommend && this.booksRecommend.booksList) {
          if (this.booksRecommend.time > new Date().getTime()) return this.booksList = this.booksRecommend.booksList
        }
        let appId = '99481548328966555'
        let appSecret = '9d3b561c5e7c4ac99e19579a8882a3fe'
        let timestamp = String(new Date().getTime()).slice(0, 10)
        let version = 'v2'
        let sign = md5(appId + appSecret + timestamp + version)
         booksList({
          quantity: 56,
          resourceTypeId: 1,
          productTypeId: '0',
          orgAccountId: '51',
          orgProductId: '22'
        },{
          appId,
          timestamp,
          sign
        }).then(res => {
          let row = 4
          let col = 14
          this.bookList = res.data.data
          this.$nextTick(() => {
            let imgs = document.querySelectorAll('.circle')
            for (let i = 0; i < imgs.length; i++) {
              imgs[i].style.transform = `rotateY(${(i % col) * (360 / col)}deg) translateY(${parseInt(i / col) * (270 + 20)}px) translateZ(600px)`
            }
          })
        })
      },
      bookClick(item) {
         this.bookItem = item
        this.bookMask = true
      },
      //初始化
      initViewer() {
        this.viewer = new Viewer({
          container: 'viewer',
          adapter: EquirectangularTilesAdapter,
          defaultZoomLvl: 0,
          navbar: [
            'caption'
          ],
          caption: '赣州市图书馆',
          loadingImg: '',
          loadingTxt: '',
          lang: {
            zoom: '缩放',
            zoomOut: '缩小',
            zoomIn: '放大',
            moveUp: '向上',
            moveDown: '向下',
            moveLeft: '向左',
            moveRight: '向右',
            download: '下载',
            fullscreen: '全屏',
            menu: '菜单',
            close: '关闭',
            twoFingers: '使用双指导航',
            ctrlZoom: '使用 ctrl + scroll(鼠标滚轮) 缩放图像',
            loadError: '全景图片无法加载!',
          },
          plugins: [
            [MarkersPlugin, {}],
          ],
        })
        this.viewer.addEventListener('position-updated', ({ position }) => {
          let yawInit = JSON.parse(this.sceneData.initLocation).yaw
          let pitchInit = JSON.parse(this.sceneData.initLocation).pitch
          let yaw = (position.yaw - yawInit) / Math.PI * 180
          let pitch = (position.pitch - pitchInit) / Math.PI * 180
          console.log(yaw,pitch);
          this.$refs.box.style.transform = `rotateY(${yaw}deg)`
          // rotateX(${rotateX}deg)
        });
        //获取标注插件对象
        this.markersPlugin = this.viewer.getPlugin(MarkersPlugin);
        //标注点击事件
        this.markersPlugin.addEventListener('select-marker', this.selectMarker)
        //载入第一张
        this.getFirstScene()
        //全景图像已加载
        this.viewer.addEventListener('ready', () => {
          console.log('ready');
        }, {once: true})
      },
      //获取第一张数据
      getFirstScene() {
        getScene(57).then(res => {
          this.sceneData = {...res.data.data}
          this.firstScencId = this.sceneData.sceneId
          this.handelLoad()
        })
      },
      //设置场景
      viewSetPanorama() {
        let path = {
          width: 6080,
          cols: 8,
          rows: 4,
          baseUrl: `${_Glob.url}${this.sceneData.imageUrl}@_t.jpg`,
          tileUrl: (col, row) => {
            return `${_Glob.url}${this.sceneData.imageUrl}@_${col}_${row}.jpg`
          },
        }
        let position = ''
        if (this.sceneData.tagetPosition) {
          position = JSON.parse(this.sceneData.tagetPosition)
        }else {
          position = this.sceneData.initLocation ? JSON.parse(this.sceneData.initLocation) : {
            yaw: 3.2736311961194278,
            pitch: 0
          }
        }

        this.viewer.setPanorama(
          path,
          {
            position: position,
            speed: 200,
            transition: false
          }, true).then(() => {
          //加载标注
          this.viewSetMarkers()
        })
      },
      //设置标注
      viewSetMarkers() {
        this.markersPlugin.addMarker(  {
          id: UUID.create().toString(),
          html: `<div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
          </div>`,
          position: {yaw: 0, pitch: 0},
        })
      },
      //载入操作
      handelLoad() {
        this.openPlan = false
        this.small = true
        //删除所有标记
        this.markersPlugin.clearMarkers()
        //清除提示
        this.markersPlugin.hideAllTooltips()
        //加载场景
        this.viewSetPanorama()

      },
      //销毁
      viewDestroy() {
        if (this.viewer) try {
          this.viewer.destroy()
        } catch (e) {
          const viewer = document.querySelector('#viewer')
          viewer.removeChild(viewer.childNodes[0])
        }
      }
    },
    beforeDestroy() {
      this.viewDestroy()
    },
  }
</script>

<style scoped lang="less">
  .bookWrap {
    position: absolute;
    width: 200px;
    height: 270px;
    top: 200px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 400px;
    /*overflow: hidden;*/
    .boxWrap {
      transform-style: preserve-3d;
    }
    .box {
      width: 200px;
      height: 270px;
      position: relative;
      top: -500px;
      transform-style: preserve-3d;
      animation: run 30s linear infinite;
    }

    .circle {
      position: absolute;
      top: 0;
      left: 0;
      width: 200px;
      height: 270px;
      box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
    }

    /*设置图像大小、边框、圆角、位置*/
    .circle img {
      width: 200px;
      height: 270px;
      border: 1px solid #ccc;
      border-radius: 10px;
      box-sizing: border-box;
      transform: rotateY(180deg);
    }

    @keyframes run {
      0% {
        transform: rotateY(0);
      }

      100% {
        transform: rotateY(360deg);
      }
    }

  }

  .bookMask {
    position: fixed;
    z-index: 300;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, .6);
    .bookInfo {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 10px;
      border-radius: 10px;
      background-color: #fff;
      text-align: center;
      .cover {
        display: block;
        width: 210px;
        height: 300px;
        border-radius: 10px;
      }
      .title {
        font-size: 16px;
        font-weight: bold;
        height: 50px;
        line-height: 50px;
        text-align: center;
      }

      .button {
        font-size: 14px;
        padding: 10px 20px;
        background-color: #ccc;
        border-radius: 10px;
      }

      .close {
        width: 40px;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: -60px;
      }

    }
  }



</style>
